<div class="flex items-center justify-between px-5 pt-4 cursor-move sticky top-0 z-10 bg-components-card-bg"
  cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <span class="font-medium text-xl">
    {{ 'PAC.Xpert.Features' | translate: {Default: 'Features'} }}
  </span>
  <div class="flex items-center">
    <button type="button" class="btn-close btn btn-secondary flex items-center justify-center w-6 h-6 cursor-pointer z-20"
      (click)="close()">
      <i class="ri-close-line"></i>
    </button>  
  </div>
</div>

<div class="flex flex-col p-5 space-y-2" >
  <!-- <div class="flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden">
    <div class="shrink-0 flex items-center justify-center mr-1 w-6 h-6">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 w-4 h-4 text-[#6938EF]" >
        <g id="file-05"><g id="Solid"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.66667 1.34356C8.66667 1.32602 8.66667 1.31725 8.66591 1.30135C8.65018 0.972168 8.3607 0.682824 8.03151 0.667251C8.01562 0.666499 8.0104 0.666501 8.00001 0.666504H5.8391C5.30248 0.666497 4.85957 0.666491 4.49878 0.695968C4.12405 0.726585 3.77958 0.792295 3.45603 0.957155C2.95426 1.21282 2.54631 1.62077 2.29065 2.12253C2.12579 2.44609 2.06008 2.79056 2.02946 3.16529C1.99999 3.52608 1.99999 3.96899 2 4.50562V11.494C1.99999 12.0307 1.99999 12.4736 2.02946 12.8344C2.06008 13.2091 2.12579 13.5536 2.29065 13.8771C2.54631 14.3789 2.95426 14.7869 3.45603 15.0425C3.77958 15.2074 4.12405 15.2731 4.49878 15.3037C4.85958 15.3332 5.30248 15.3332 5.83912 15.3332H10.1609C10.6975 15.3332 11.1404 15.3332 11.5012 15.3037C11.8759 15.2731 12.2204 15.2074 12.544 15.0425C13.0457 14.7869 13.4537 14.3789 13.7093 13.8771C13.8742 13.5536 13.9399 13.2091 13.9705 12.8344C14 12.4736 14 12.0307 14 11.4941V6.66646C14 6.65611 14 6.65093 13.9993 6.63505C13.9837 6.30583 13.6943 6.01631 13.3651 6.0006C13.3492 5.99985 13.3405 5.99985 13.323 5.99985L10.3787 5.99985C10.2105 5.99987 10.0466 5.99989 9.90785 5.98855C9.75545 5.9761 9.57563 5.94672 9.39468 5.85452C9.1438 5.72669 8.93983 5.52272 8.81199 5.27183C8.7198 5.09088 8.69042 4.91106 8.67797 4.75867C8.66663 4.61989 8.66665 4.45603 8.66667 4.28778L8.66667 1.34356ZM5.33333 8.6665C4.96514 8.6665 4.66667 8.96498 4.66667 9.33317C4.66667 9.70136 4.96514 9.99984 5.33333 9.99984H10.6667C11.0349 9.99984 11.3333 9.70136 11.3333 9.33317C11.3333 8.96498 11.0349 8.6665 10.6667 8.6665H5.33333ZM5.33333 11.3332C4.96514 11.3332 4.66667 11.6316 4.66667 11.9998C4.66667 12.368 4.96514 12.6665 5.33333 12.6665H9.33333C9.70152 12.6665 10 12.368 10 11.9998C10 11.6316 9.70152 11.3332 9.33333 11.3332H5.33333Z" fill="currentColor"></path><path d="M12.6053 4.6665C12.8011 4.6665 12.8989 4.6665 12.9791 4.61735C13.0923 4.54794 13.16 4.3844 13.129 4.25526C13.107 4.16382 13.0432 4.10006 12.9155 3.97253L10.694 1.75098C10.5664 1.62333 10.5027 1.5595 10.4112 1.53752C10.2821 1.50648 10.1186 1.57417 10.0492 1.6874C10 1.76757 10 1.86545 10 2.0612L10 4.13315C10 4.31982 10 4.41316 10.0363 4.48446C10.0683 4.54718 10.1193 4.59818 10.182 4.63014C10.2533 4.66647 10.3466 4.66647 10.5333 4.66647L12.6053 4.6665Z" fill="currentColor"></path></g></g>
      </svg>
    </div>
    <div class="shrink-0 mr-2 whitespace-nowrap text-gray-800 font-semibold">Image Upload</div>
    <div class="grow"></div>
    <div class="flex items-center">
      <div class="inline-block" data-state="closed">
        <div class="flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200">
          <i class="ri-settings-5-line"></i>
          <div class="ml-1 leading-[18px] text-sm font-medium ">Settings</div>
        </div>
      </div>
      <div class="ml-4 mr-3 w-[1px] h-3.5 bg-gray-200"></div>

      <mat-slide-toggle
        labelPosition="before"
        ngm-density="xs"
      />
    </div>
  </div> -->

  <div class="bg-gray-50 rounded-xl">
    <div class="flex items-center px-3 h-12 overflow-hidden">
      <div class="shrink-0 flex items-center justify-center mr-1 w-6 h-6">
        <i class="ri-paragraph shrink-0 text-lg text-[#06AED4]"></i>
      </div>
      <div class="shrink-0 mr-2 whitespace-nowrap text-gray-800 font-semibold">
        {{ 'PAC.Xpert.ConversationSummary' | translate: {Default: 'Conversation Summary'} }}
      </div>
      <div class="grow"></div>

      <div class="flex items-center">
        <button type="button" class="btn flex items-center h-8 rounded-lg"
          [class.text-primary-500]="view() === 'summarize' && enabledSummarize()"
          [disabled]="!enabledSummarize()"
          (click)="toggleView('summarize')"
        >
          <i class="ri-settings-5-line text-lg"></i>
          <div class="ml-1 leading-[18px] text-sm font-medium">{{ 'PAC.Xpert.Settings' | translate: {Default: 'Settings'} }}</div>
        </button>
        <div class="ml-4 mr-3 w-[1px] h-3.5 bg-gray-200"></div>

        <mat-slide-toggle [ngModel]="enabledSummarize()" (ngModelChange)="toggleSummarize($event)"
          labelPosition="before"
          ngm-density small
        />
      </div>
    </div>

    @if (view() === 'summarize' && enabledSummarize()) {
      <xpert-studio-features-summary class="w-full px-3 mt-4 overflow-hidden" @heightChangeAnimation />
    }
  </div>

  <div class="bg-gray-50 rounded-xl">
    <div class="flex items-center px-3 h-12 overflow-hidden">
      <div class="shrink-0 flex items-center justify-center mr-1 w-6 h-6">
        <i class="ri-brain-fill shrink-0 text-lg text-lime-600"></i>
      </div>
      <div class="shrink-0 mr-2 whitespace-nowrap text-gray-800 font-semibold">
        {{ 'PAC.Xpert.LongTermMemory' | translate: {Default: 'Long-term Memory'} }}
      </div>
      <div class="grow"></div>

      <div class="flex items-center">
        <button type="button" class="btn flex items-center h-8 rounded-lg"
          [class.text-primary-500]="view() === 'memory' && enabledMemory()"
          [disabled]="!enabledMemory()"
          (click)="toggleView('memory')"
        >
          <i class="ri-settings-5-line text-lg"></i>
          <div class="ml-1 leading-[18px] text-sm font-medium">{{ 'PAC.Xpert.Settings' | translate: {Default: 'Settings'} }}</div>
        </button>
        <div class="ml-4 mr-3 w-[1px] h-3.5 bg-gray-200"></div>

        <mat-slide-toggle [ngModel]="enabledMemory()" (ngModelChange)="toggleMemory($event)"
          labelPosition="before"
          ngm-density small
        />
      </div>
    </div>

    @if (view() === 'memory' && enabledMemory()) {
      <xpert-studio-features-memory class="w-full px-3 mt-2 overflow-hidden" @heightChangeAnimation/>
    }
  </div>
  
</div>
